<template>
  <div>
    <el-container direction="vertical">
      <TopHeader></TopHeader>
      <el-container>
        <SideMenu></SideMenu>
        <el-main>
          <div class="pageHeader">
            <h4 class="firstPath" v-if="routeFirstName">{{routeFirstName}}</h4>
            <span v-if="routeFirstName" style="color:#929292;margin-right:20px">/</span>
            <h4>{{routeName}}</h4>
          </div>
          <router-view class="contentStyle"></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- <el-container>
      <SideMenu></SideMenu>
      <el-container direction='vertical'>
        <TopHeader></TopHeader>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container> -->
  </div>
</template>

<script setup>
import TopHeader from '@/components/mainbox/TopHeader.vue'
import SideMenu from '@/components/mainbox/SideMenu.vue'
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'
// import { onMounted } from 'vue'

const router = useRouter()
const routeName = ref('')
const routeFirstName = ref('')

watch(
  () => router.currentRoute.value,
  (newValue) => {
    console.log(newValue, newValue.name)
    if(newValue.path.includes('/setings')){
      routeFirstName.value = 'Settings'
    }else if(newValue.path.includes('/PTList/')){
      routeFirstName.value = 'PTList'
    }else{
      routeFirstName.value = ''
    }
    routeName.value = newValue.name
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.el-main {
  background-color: #d7e9ff;
  padding: 10px 40px 0 40px;
  overflow: auto;
  min-height: calc(100vh - 60px);
  margin-left: 3px;
  .contentStyle {
    overflow: auto;
    padding: 24px;
    background-color: #fff;
    height: calc(100vh - 200px);
  }
}
.pageHeader{
  display: flex;
  margin: 20px 20px 20px 5px;
  .firstPath{
    color: #929292;
    margin-right: 20px;
  }
}
</style>
